<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #fff;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo{
        width: 355px;
        height:390px;
        background: #fff;
        border-radius: 3px;
        border-bottom:2px solid #6bc907;
        float:right;
        position: relative;
        top: 60px;
        right:180px;
    }
    .Login_user{
        width: 355px;
        height:390px;
        padding:30px;
        position:absolute;
        top: 0;
        left:0;
    }
    .layout-header{
        height: 500px;
        background: url('../images/login_bg.png') no-repeat center;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-ceiling{
        background: #fff;
        padding: 20px 0;
        overflow: hidden;
    }
    .layout-ceiling-main{
        float: left;
        margin-left:15px;
        margin-top:30px;
        font-size:25px;
        color:#0e6c26;
    }
    .layout-ceiling-main a{
        color: #0e6c26;
    }
    .logo img{
        margin-left:100px;
        display:block;
        float:left;
    }
    .Qusition{
        width:100%;
        text-align:center;
        margin-top:30px;
        font-size:14px;

    }
    .Qusition a{
         color:#676c71;
    }
</style>
<template>
     <div class="layout">
        <div class="layout-ceiling">
            <div class="logo">
                <img src="../images/logo_index.png" height="73" width="276">
            </div>
            <div class="layout-ceiling-main">
                企业端生产管理系统
            </div>
        </div>
        <div class="layout-header">
            <div class="layout-logo">
                <div class="Login_user">
                    <p style="font-size:20px;padding:10px;color:#08a692">登陆</p>
                    <i-form v-ref:form-inline :model="formInline" :rules="ruleInline">
                        <Form-item prop="user">
                            <i-input type="text" :value.sync="formInline.user" placeholder="手机/邮箱/会员名">
                                <Icon type="ios-person-outline" slot="prepend" size="22"></Icon>
                            </i-input>
                        </Form-item>
                        <Form-item prop="password">
                            <i-input type="password" :value.sync="formInline.password" placeholder="请输入密码">
                                <Icon type="ios-locked-outline" slot="prepend" size="22"></Icon>
                            </i-input>
                        </Form-item>
                        <Form-item>
                            <i-button type="primary" @click="handleSubmit('formInline')" style="width:100%;background:#6bc907;border:1px solid #6bc907">登录</i-button>
                        </Form-item>
                            <Checkbox class="check" :checked.sync="single" @click="rememberPassword">{{remPassLabel}}</Checkbox>
                            <p style="color:#676c71;">还没有账户？<a href="" style="color:#ff7830">免费注册</a></p>
                    </i-form>
                    <p class="Qusition"><a href="#" title="">如有问题，请拨打客服热线</a></p>
                </div>
            </div>
        </div>
        <div class="layout-copy">
            copyright&copy;2010-2016 By Jawasoft 版权所有
        </div>
    </div>
</template>

<script>

      export default {
        // components: {
        //     Des5
        // },
        data () {
            return {
                single: false,
                remPassLabel: "记住账号密码",
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 4, message: '密码长度不能小于4位', trigger: 'blur' }
                    ]
                }
            }
        },
        ready() {
            this.formInline.user = localStorage.getItem("user");
            this.formInline.password = localStorage.getItem("password");
            if(this.formInline.user!=null && this.formInline.password!=null){
                this.single=true;
            }
        },
        methods: {
            rememberPassword(token, uName,UserKey) {
                localStorage.setItem("token",token);
                sessionStorage.setItem("name", uName);
                localStorage.setItem("UserKey",UserKey);
                //把手机号和密码存到本地
                if (this.single) {
                    localStorage.setItem("user",this.formInline.user);
                    localStorage.setItem("password",this.formInline.password);
                }
            },
            handleSubmit(formInline) {
                this.$refs[formInline].validate((valid) => {
                    //this.formInline.user 是用户名
                    //this.formInline.password 是密码

                    if (valid) {
                        if (this.formInline.password.length < 4) {
                            this.$Message.error('密码不不少于4位数!');
                        }

                            //第一次请求封装
                            this.$http({
                                method:'GET',
                                url:'http://192.168.10.124:8080/oauth/token?v=1_13',
                                async: false,
                               // data:{v:"1_13"},
                                //headers: {"X-Requested-With": "XMLHttpRequest"},
                                emulateJSON: true
                              }).then(response => {
                                let data = response.body;
                                let token = data.Data.Token


                                //第二次请求封装  (已经成功) //注意事项：data必须是json
                            this.postHttp("/pubkey?v=1_13",JSON.stringify({token:token}))
                                .then(response => {
                                    let data = response.body;
                                    let pubkey = data.Data.Pubkey
                                    // console.log("第二次请求");
                                    // console.log(pubkey);


                                    //准备第三次请求 (psot方式)
                                    //获取帐号、密码、Token、pubkey
                                   let userBy = this.formInline.user;
                                   let pwd = this.formInline.password;
                                   //let tok = userkeytoken;
                                   let publickey = pubkey;

                                   //加密后的密码
                                   let newpwd = stringToHex(des(pubkey, pwd, 1, true, pubkey));

                                   //console.log(newpwd);
                                   //formValidate  负责转换格式   不然拿到不是json
                                   let formValidate = {"PassWord":newpwd,"LoginBy":userBy,"Token":token,"PublicKey":publickey};


                                this.postHttp("/login?v=1_13",formValidate)
                                    .then(response => {
                                        let data = response.body;
                                        if (data.Code==="0") {
                                             // console.log(1);
                                             // console.log(token);
                                             this.rememberPassword(token,data.Data.UserName,data.Data.UserKey);
                                             this.$Message.success('登录成功!');
                                             //this.$Message.success(data.Data.UserKey);
                                             router.go("/home/hometable");
                                             //console.log(data.Data.UserName);
                                             //this.$router.push('/home');
                                        }else {
                                           this.$Message.error('您输入的不正确!');
                                           //  router.go("/table");
                                        };
                                        //let pubkey = data.Data.Pubkey
                                }, (error) => {
                                    console.log(error)
                                })
                                    //第三次请求结束

                                }, (error) => {
                                    console.log(error)
                                })
                                 //第二次请求结束  (已经成功)

                            }, (error) => {
                                console.log(error)
                            })
                            //第一次请求结束  (已经成功)
                    } else {
                        this.$Message.error('登录失败!');
                    }
            })

            }
        },

    }
</script>
